<template>
  <div class="container">
    <topTitle :titleText="titleText"></topTitle>
    <div class="mainCon">
      <div>
        <div class="commomPaddingComtainer">
          <el-row
            class="toolbar searchInputWidth"
            style="padding-bottom: 0; margin-bottom: 0"
          >
            <el-form :inline="true" :model="filterField">
              <form
                id="fileForm"
                name="myform"
                method="post"
                :action="url"
                enctype="multipart/form-data"
              >
                <el-form-item label="表头" class="row-padding-bottom formItem">
                  <el-input
                    class="input"
                    placeholder="请输入内容"
                    name="excelHeads"
                    v-model="filterField.excelHeads"
                    clearable
                  ></el-input>
                </el-form-item>
                <el-form-item
                  label="查询sql"
                  class="row-padding-bottom formItem"
                >
                  <span class="uploadBox el-input__inner">
                    <input
                      type="file"
                      id="file"
                      name="file"
                      placeholder="placeholder"
                    />
                  </span>
                </el-form-item>
              </form>
              <el-form-item>
                <el-button
                  type="primary"
                  icon="icon iconfont iconchazhao1"
                  @click="searchList"
                  class="commonBtn"
                ></el-button>
              </el-form-item>
              <el-form-item>
                <el-button
                  class="commonBut saveBtn funComBut"
                  icon="icon iconfont icondaochu"
                  @click="exportExcel"
                >
                  <span class="opetareText">导出报表</span>
                </el-button>
              </el-form-item>
            </el-form>
          </el-row>
          <el-table
            :data="tableList"
            :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
            highlight-current-row
            stripe
            v-loading="loading"
            style="border: 1px solid #dfe6ec"
          >
            <el-table-column
              v-for="(item, index) of tableHeardArr"
              :key="index"
              prop="0"
              :label="item"
              align="center"
            >
              <template slot-scope="scope">
                {{ scope.row[index] }}
              </template>
            </el-table-column>
            <!-- 表格数据为空时，页面显示 -->
            <div slot="empty" v-show="tableList.length < 1">
              <emptyTable emptyText="暂无相关信息"></emptyTable>
            </div>
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import common from '../../kits/common'

export default {
  name: 'ywStatistics',
  data() {
    return {
      titleText: '运维统计',
      //表格数据
      tableList: [],
      //搜索条件
      filterField: {
        excelHeads: '',
      },
      tableHeardArr: [], //表头
      url: '',
    }
  },
  created() {
    this.url = common.uploadUrl + 'api-s/stats/export'
  },
  activated() {},
  methods: {
    // 搜索
    searchList() {
      this.tableHeardArr = this.filterField.excelHeads.split(',')
      this.uploadFileByAjaxSubmit('api-s/stats/search')
    },
    uploadFileByAjaxSubmit(url) {
      let that = this
      var options = {
        url: common.uploadUrl + url,
        type: 'POST',
        dataType: 'json',
        contentType: false,
        processData: false,
        success: function (data) {
          if (!data.hasError) {
            that.tableList = data.result
          } else {
            that.$message({
              type: 'warning',
              message: data.errorMsg,
            })
          }
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
          that.$message({
            type: 'warning',
            message: '查询失败',
          })
        },
      }
      //三种方式均可
      $('#fileForm').ajaxSubmit(options)
      return false
    },
    exportExcel() {
      var form = document.getElementById('fileForm')
      form.submit()
    },
  },
}
</script>

<style scoped lang="less">
.mainCon {
  top: 196px;
}
</style>
